<template>
	<view class="box-swiper">
		<swiper class="swiper" circular indicator-dots autoplay :interval="2000" :duration="1200">
			<swiper-item
				class="swiper-item"
				v-for="item in arr_swiper_image.value"
				@click="open_themeColumn(item.category)"
				:key="item.id"
			>
				<view class="box-text-image">
					<view class="text">{{ item.name }}</view>
					<view class="image">
						<ImageLoading :src="item.url"></ImageLoading>
					</view>
					<!-- <image class="image" :src="item.url" mode="widthFix"></image> -->
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
import { onBeforeMount, reactive } from 'vue'
import { get_index_swiper_image_date } from '@/api/index.js'

const arr_swiper_image = reactive({ value: [] })
onBeforeMount(() => {
	get_index_swiper_image_date().then((res) => {
		arr_swiper_image.value = res.data
	})
})

const open_themeColumn = function (category) {
	let arg = '?category=' + category
	uni.navigateTo({
		url: '/pages/themeColumn/themeColumn' + arg
	})
}
</script>

<style scoped lang="scss">
.box-swiper {
	width: 100%;
	.swiper {
		height: 360rpx;
		border-radius: 20rpx;
		overflow: hidden;
		.swiper-item {
			position: relative;
			.box-text-image {
				.text {
					position: absolute;
					z-index: 2;
					bottom: 8rpx;
					right: 8rpx;

					font-size: 22rpx;
					color: white;

					border: 1px solid white;
					border-radius: 100rpx;
					padding: 2rpx 15rpx;

					background-color: rgba(255, 140, 148, 0.5);
				}
				.image {
					height: 360rpx;
				}
			}
		}
	}
}
</style>
